<template>
  <view class="body">
    <img
      v-if="type == '9'"
      class="img-Bg"
      src="https://ainengli.meilianshuke.com/jkhx/weight/phychology-bg1.png"
      alt=""
    />
    <img
      v-else
      class="img-Bg"
      src="https://ainengli.meilianshuke.com/jkhx/weight/phychology-bg2.png"
      alt=""
    />
    <view class="box">
      <view class="title">{{ type == '9' ? SDSintroduction.title : SASintroduction.title }}</view>
      <view class="second-title">
        <view class="line" />
        <text>简介</text>
      </view>
      <view class="content">
        <text>
          {{ type == '9' ? SDSintroduction.intro : SASintroduction.intro }}
        </text>
      </view>
      <view class="second-title">
        <view class="line" />
        <text>提示</text>
      </view>
      <view class="content">
        <text>
          {{ type == '9' ? SDSintroduction.tips : SASintroduction.tips }}
        </text>
      </view>
    </view>
    <view class="fixed">
      <button @tap="begin" class="fix-btn">开始测评</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const type = ref('')
const SDSintroduction = ref({
  title: '抑郁自评量表（SDS）',
  intro:
    '抑郁自评量表（Self-Rating Depression Scale，SDS）是由美国杜克大学医学院的 William W. K. Zung 于 1965 年编制的，是目前应用最广泛的抑郁自评量表之一，能有效地反映抑郁状态的有关症状及其严重程度和变化情况。',
  tips: '本量表包含20个项目，分为4级评分，为保证调查结果的准确性，务必请您仔细阅读以下内容，然后根据您最近1周的实际情况选择适当的选项，每一条文字后面有四个选项，表示：A 从无或偶尔；B 有时；C 经常；D 总是如此。'
})
const SASintroduction = ref({
  title: '焦虑自评量表（SAS）',
  intro:
    '焦虑自评量表（SAS）从量表构造的形式到具体评定的方法，都与抑郁自评量表(SDS)十分相似，是一种分析病人主观症状的相当简便的临床工具。适用于具有焦虑症状的成年人，具有广泛的应用性。',
  tips: '下面有20个项目，请仔细阅读每一条，把意思弄明白，然后根据您最近一周的实际感觉，进行选择。每道题不要花费太久思考，凭第一印象回答。目前主要的情绪和躯体症状的自评请根据自觉症状的程度选择。'
})

onLoad((option: any) => {
  type.value = option ? option.type : ''
})

const begin = () => {
  uni.navigateTo({ url: '/module/src/pages/psychology/questionnaire?type=' + type.value })
}
</script>

<style lang="scss" scoped>
.body {
  position: relative;
  height: 100%;
  padding: 34rpx 32rpx;
  padding-bottom: calc(144rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
  overflow: auto;

  .img-Bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 655rpx;
  }

  .box {
    padding: 32rpx;
    margin-top: 384rpx;
    margin-bottom: 32rpx;
    background: #fff;
    border-radius: 24rpx;

    .title {
      margin-bottom: 24rpx;
      font-size: 44rpx;
      font-weight: 700;
      color: #222;
    }

    .second-title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 24rpx;
      font-size: 32rpx;
      font-weight: 700;
      color: #222;

      .line {
        width: 8rpx;
        height: 36rpx;
        margin-right: 16rpx;
        background: #00d1b6;
        border-radius: 0 8rpx 8rpx 0;
      }
    }

    .content {
      margin-bottom: 48rpx;
      font-size: 24rpx;
      font-weight: 500;
      line-height: 44rpx;
      color: #666;
      text-align: justify;
    }

    .content:last-child {
      margin: 0;
    }
  }

  .fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    display: flex;
    gap: 24rpx;
    justify-content: space-between;
    width: 100%;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    background: #fff;

    .fix-btn {
      width: 100%;
      font-size: 32rpx;
      font-weight: 700;
      color: #fff;
      background: #00d1b6;
      border-radius: 44rpx;
    }
  }
}
</style>
